<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-input class="input-item" v-model="inputData" placeholder="请输入数据" @keyup.enter.native="addMission"/>
        <el-button type="primary" @click="addMission">添加</el-button>
      </el-col>
    </el-row>
    <el-row class="table-content">
      <el-col :span="22">
        <div v-if="missionList.length >= 1">
          <el-table ref="" :data="missionList" border style="width:100%" height="250"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="序号" width="80" prop="index" sortable/>
            <el-table-column label="任务名称" width="120" prop="data"/>
            <el-table-column label="操作人员" width="120" prop="name"/>
            <el-table-column label="添加时间" width="120" prop="date" sortable/>
            <el-table-column label="状态" width="120" prop="desc" class="content-font">
              <template slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.status"></i>
                <i class="el-icon-warning" v-else></i>
                {{scope.row.desc}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-setting"
                           @click="processMission(scope.$index,scope.row)" :disabled="scope.row.status">执行
                </el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete"
                           @click="deleteMission(scope.$index,scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <label>完成任务数:{{processCount}} ,总任务数:{{missionList.length + delmissionList.length}}</label>
      <el-button type="primary" size="mini" @click="batchProcess">批量执行</el-button>
      <el-button type="danger" size="mini" @click="batchDelete">批量删除</el-button>
    </el-row>
    <el-row>
      <div v-if="delmissionList.length >= 1">
        <el-tag type="info">已经删除的任务总数:{{delmissionList.length}}</el-tag>
        <el-button type="primary" size="small" @click="cleanDelList">清空删除列表</el-button>
        <div v-for="(item,index) in delmissionList" :key="index">
          <DelMissionItem :delMissionData="item"></DelMissionItem>
        </div>
      </div>
    </el-row>
    <el-row>
      <NumCount></NumCount>
    </el-row>
    <el-row>
      <el-col :span="4">
        <MenuTest></MenuTest>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import MissionItem from './MissionItem';
  import DelMissionItem from './DelMissionItem';
  import NumCount from "./NumCount";
  import MenuTest from "./MenuTest";

  export default {
    data() {
      return {
        name: "MissionProcess",
        inputData: "",
        missionList: [],
        delmissionList: [],
        processCount: 0,
        multipleSelection: []
      }
    },
    methods: {
      addMission() {
        if (this.inputData.trim()) {
          let _this = this;
          let currentTime = new Date().toLocaleDateString();
          this.missionList.push({
            data: _this.inputData,
            index: _this.missionList.length + 1,
            name: 'shiqla',
            date: currentTime,
            status: false,
            desc: '未执行'
          });
          this.inputData = "";
        } else {
          this.$alert('请输入一个有效的任务名称!', '警告', {
            confirmButtonText: '确定',
            callback: () => {
            }
          });
          this.inputData = "";
        }
      },
      deleteMission(index, row) {
        this.missionList.splice(index, 1);
        this.delmissionList.push(row);
      },
      processMission(index, row) {
        row.desc = "已经执行";
        row.status = !row.status;
        this.processCount++;
      },
      cleanDelList() {
        this.delmissionList = [];
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      batchProcess() {
        if (this.multipleSelection.length > 0) {
          let _this = this;
          this.multipleSelection.forEach(row => {
            if (!row.status) {
              row.desc = "已经执行";
              row.status = !row.status;
              _this.processCount++;
            }
          });
        } else {
          console.log("没有选中的时候");
          this.$alert("没有选中任务,不能批量执行!", "警告", {
            confirmButtonText: '确定',
            callback: () => {
            }
          })
        }
      },
      batchDelete() {
        if (this.multipleSelection.length > 0) {
          let _this = this;
          console.log("multipleSelection: " + this.multipleSelection);
          this.multipleSelection.forEach((row, rowIndex) => {
            console.log(rowIndex);
            let obj = _this.missionList.splice(rowIndex, 1);
            _this.delmissionList.push(obj);
          });
          this.multipleSelection = [];
        } else {
          this.$alert("没有选中任务,不能批量删除!", "警告", {
            confirmButtonText: '确定',
            callback: () => {
            }
          })
        }
      }
    },
    components: {
      MissionItem,
      DelMissionItem,
      NumCount,
      MenuTest
    }
  }
</script>

<style scoped>
  .input-item {
    width: 80%;
  }

  .process-mission {
    margin: 5px 0;
    /*background-color: #8c939d;*/
  }

  .table-content {
    margin: 5px 0;
  }

  .content-font {
    color: #42b983;
  }

  .el-input__inner {
    width: 120px;
  }
  .el-icon-success{
    color: green;
  }
  .el-icon-warning{
    color: yellow;
  }
</style>
